<!-- 订单页面 -->
<!DOCTYPE html>
<html>
<head>
  <title>订单页面</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  {%include 'nav.html' %}
  <h1>我的订单</h1>
  <table id="order-table">
    <thead>
      <tr>
        <th>产品名称</th>
        <th>类别</th>
        <th>单价</th>
        <th>总价</th>
      </tr>
    </thead>
    <tbody id="order-tbody">
      <!-- 订单项目将被渲染在这里 -->
    </tbody>
    <tfoot>
      <tr>
        <th>总计</th>
        <th></th>
        <th></th>
        <th id="total-price"></th>
      </tr>
    </tfoot>
  </table>

  <button id="place-order-btn">下单</button>

  <script src="script.js"></script>
</body>
<script>
  // script.js
const orderTable = document.getElementById('order-table');
const orderTbody = document.getElementById('order-tbody');
const totalPriceElement = document.getElementById('total-price');
const placeOrderBtn = document.getElementById('place-order-btn');

// 渲染订单项目
fetch('/order_items')
  .then(response => response.json())
  .then(orderItems => {
    orderTbody.innerHTML = '';
    orderItems.forEach(item => {
      const row = document.createElement('tr');
      row.innerHTML = `
        <td>${item.productName}</td>
        <td>${item.quantity}</td>
        <td>${item.unitPrice}</td>
        <td>${item.totalPrice}</td>
      `;
      orderTbody.appendChild(row);
    });
  });

// 计算总价
fetch('/order_total')
  .then(response => response.json())
  .then(totalPrice => {
    totalPriceElement.textContent = `总计：${totalPrice}`;
  });

// 下单
placeOrderBtn.addEventListener('click', () => {
  fetch('/api/place-order')
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        alert('订单下单成功!');
      } else {
        alert('下单失败');
      }
    });
});
</script>
<style>
  /* style.css */
#order-table {
  width: 100%;
  border-collapse: collapse;
}

#order-table th, #order-table td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
}

#order-table th {
  background-color: #f0f0f0;
}

#total-price {
  font-weight: bold;
}
</style>

</html>